<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
@css(lib/zTree/css/zTreeStyle/zTreeStyle.css)
@js(lib/zTree/js/jquery.ztree.core.js)
@js(lib/zTree/js/jquery.ztree.core.js)
<SCRIPT type="text/javascript">

    function onClick(e,treeId, treeNode) {
        console.log(9);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        console.log(e,'e');
        console.log(treeId,'treeId');
        console.log(treeNode,'treeNode');
        zTree.expandAll(false);
        zTree.expandNode(treeNode);
    }
    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 5;
        var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
        var spaceStr = '';
        switchObj.remove();
        icoObj.before(switchObj);
        if (treeNode.level === 1) {
         spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * (treeNode.level+1))+ "px'></span>";
            // console.log(treeNode.level);
        }
        else if(treeNode.level > 1){
             spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * (treeNode.level+2))+ "px'></span>";

        }
        switchObj.before(spaceStr);

    }

    function beforeClick(treeId, node) {
        var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        var curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
        if (node.isParent) {
            if (node.level === 0) {
                var pNode = curMenu;
                while (pNode && pNode.level !==0) {
                    pNode = pNode.getParentNode();
                }
                if (pNode !== node) {
                    var a = $("#" + pNode.tId + "_a");
                    a.removeClass("cur");
                    zTree_Menu.expandNode(pNode, false);
                }
                a = $("#" + node.tId + "_a");
                a.addClass("cur");

                var isOpen = false;
                for (var i=0,l=node.children.length; i<l; i++) {
                    if(node.children[i].open) {
                        isOpen = true;
                        break;
                    }
                }
                if (isOpen) {
                    zTree_Menu.expandNode(node, true);
                    curMenu = node;
                } else {
                    zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
                    curMenu = node.children[0];
                }
            } else {
                zTree_Menu.expandNode(node);
            }
        }
        return !node.isParent;
    }

    $(document).ready(function(){
        var curMenu = null, zTree_Menu = null;
        var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: false,
                dblClickExpand: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                // onClick: onClick
            }
        };

        /*节点数据*/
        var zNodes = '{!! $arr_menu_list !!}';
        zNodes = zNodes.replace(/--/g, "'");
        zNodes =json_string_to_obj(zNodes);


        var treeObj = $("#treeDemo");
        $.fn.zTree.init(treeObj, setting, zNodes);
        zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
        zTree_Menu.selectNode(curMenu);
        var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
        a.addClass("cur");

        treeObj.hover(function () {
            if (!treeObj.hasClass("showIcon")) {
                treeObj.addClass("showIcon");
            }
        }, function() {
            treeObj.removeClass("showIcon");
        });
    });
    //-->
</SCRIPT>
<style type="text/css">
    .ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
    .ztree li ul{ margin:0; padding:0}
    .ztree li {line-height:30px;}
    .ztree li a {width:200px;height:30px;padding-top: 0px;}
    .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
    .ztree li a span.button.switch {visibility:hidden}
    .ztree.showIcon li a span.button.switch {visibility:visible}
    .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
    .ztree li span {line-height:30px;}
    .ztree li span.button {margin-top: -7px;}
    .ztree li span.button.switch {width: 16px;height: 16px;}

    .ztree li a.level0 span {font-size: 120%;font-weight: bold;}
    .ztree li span.button {background-image:url("/admin/lib/zTree/demo/cn/super/left_menuForOutLook.png"); *background-image:url("/admin/lib/zTree/demo/cn/super/left_menuForOutLook.gif")}
    .ztree li span.button.switch.level0 {width: 20px; height:20px}
    .ztree li span.button.switch.level1 {width: 20px; height:20px}
    .ztree li span.button.noline_open {background-position: 0 0;}
    .ztree li span.button.noline_close {background-position: -18px 0;}
    .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
    .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
</style>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->